<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>用户中心</title>
    <link rel="stylesheet" href="css/user.css" >
    <link rel="stylesheet" href="./css/modal.css">
    <link rel="stylesheet" href="./css/address.css">
    <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="header">
    <h1>用户中心</h1>
    <div class="username"><span onclick="window.history.back()">返回主页</span> | <span id="name">用户名</span> | <a href="#" style="color: white;" onclick="logout()">退出登录</a></div>
</div>
<div class="sidebar">
    <a data-target="1" href="#">用户主页</a>
    <a data-target="2" href="#">修改密码</a>
    <a data-target="3" href="#">资金管理</a>
    <a data-target="4" href="#">地址管理</a>
    <a data-target="5" href="#">订单管理</a>
</div>
<div class="content active" id="1">
    <div class="profile">
        <img id="userImage" alt="用户头像" src="https://via.placeholder.com/100">
        <h2 id="username">用户名</h2>
    </div>
    <div class="cards">
        <div class="card">
            <p id="userID">用户ID: 123456</p>
        </div>
        <div class="card">
            <p id="userAccount">用户账号: example_user</p>
        </div>
        <div class="card">
            <p><span id="userPhone">电话: <span id="phone">暂未绑定</span></span><a href="#" class="goto">去修改>></a></p>
        </div>
        <div class="card">
            <p><span id="userEmail">邮箱: <span id="email">暂未绑定</span></span><a href="#" class="goto">去修改>></a></p>
        </div>
        <div class="card">
            <p><span id="orderCount">订单: 0已完成</span><a href="#" id="goToOrders">  前往管理>></a></p>
        </div>
        <div class="card">
            <p><span id="allBalance">余额: ￥1000 </span><a href="#" id="gotoRecharge">  前往充值>></a></p>
        </div>
    </div>
</div>
<!-- 修改弹窗 -->
<div id="userInfoModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>修改电话</h2>
        <label for="newPhone"></label><input type="tel" id="newPhone" placeholder="请输入新的电话号码">
        <h2>修改邮箱</h2>
        <label for="newEmail"></label><input type="email" id="newEmail" placeholder="请输入新的邮箱地址">
        <button id="save">保存</button>
    </div>
</div>
<div class="content" id="2">
    <h2>修改密码</h2>
    <div class="wrapper">
        <div class="input-data">
            <label for="OPassword"></label><input id="OPassword" required type="password">
            <div class="underline"></div>
            <label>原密码</label>
        </div>
    </div>
    <div class="wrapper">
        <div class="input-data">
            <label for="CPassword"></label><input id="CPassword" required type="password">
            <div class="underline"></div>
            <label>现密码</label>
        </div>
    </div>
    <div class="wrapper">
        <div class="input-data">
            <input id="CRPassword" required type="password"><label for="CRPassword">、</label>
            <div class="underline"></div>
            <label>重复密码</label>
        </div>
    </div>
    <button class="submit-button" onclick="updatePassword()">提交</button>
</div>
<div class="content" id="3">
    <div class="card" id="balance">
        <h2 id="userAmount">余额: ￥1000</h2>
        <span id="payment">管理支付方式>></span>
    </div>
    <div>
        <h2>充值</h2>
        <div class="amounts">
            <div class="amount" data-amount="50">￥50</div>
            <div class="amount" data-amount="100">￥100</div>
            <div class="amount" data-amount="200">￥200</div>
            <div class="amount" data-amount="500">￥500</div>
            <div class="amount" data-amount="1000">￥1000</div>
            <div class="amount" data-amount="2000">￥2000</div>
            <div class="custom-amount">
                <label for="customAmount"></label><input type="number" id="customAmount" placeholder="自定义金额" value="10" step="10" min="10">
            </div>
        </div>
        <button class="recharge-button" onclick="recharge()">确认充值</button>
    </div>
</div>
<div class="content" id="4">
    <button class="add-address-button" onclick="showAddAddress()">添加地址</button>
    <div id="add-address-popup" class="popup card">
        <h2>添加地址</h2>
        <div class="input-group">
            <label for="full-name"></label><input type="text" id="full-name" placeholder="输入完整姓名">
            <label for="gender-select"></label><select id="gender-select">
                <option value="" disabled selected>选择称谓</option>
                <option value="先生">先生</option>
                <option value="女士">女士</option>
            </select>
        </div>
        <label for="phone-number"></label><input type="text" id="phone-number" style="width:93.4%" placeholder="输入电话号码">
        <div class="input-group">
            <label for="province-select"></label><select id="province-select" onchange="updateCityOptions()">
                <option value="" disabled selected>选择省份</option>
                <option value="福建">福建</option>
                <option value="广东">广东</option>
                <!-- 更多省份选项 -->
            </select>
            <label for="city-select"></label><select id="city-select" onchange="updateDistrictOptions()">
                <option value="" disabled selected>选择城市</option>
                <!-- 城市选项将根据省份动态更新 -->
            </select>
            <label for="district-select"></label><select id="district-select">
                <option value="" disabled selected>选择区县</option>
                <!-- 区县选项将根据城市动态更新 -->
            </select>
        </div>
        <label for="full-address"></label><input type="text" id="full-address" style="width:93.4%" placeholder="输入完整地址">
        <button class="btn" id="add" onclick="addAddress()">添加</button>
        <button class="btn" onclick="closePopup('add-address-popup')">关闭</button>
    </div>
    <div id="address"></div>
</div>
<div class="content" id="5">
</div>
<div id="infoModal" class="infoModal">
    <div class="infoModalContent">
        <p id="infoTitle"></p>
        <button id="confirmBtn">确定</button>
    </div>
</div>
<script src="./js/user.js"></script>
<script src="./js/modal.js"></script>
<script src="./js/address.js"></script>
</body>
</html>